<!--
 * @Author: anxia.ack anchenkai@come-future.com
 * @Date: 2025-04-21 11:55:34
 * @LastEditors: anxia.ack anchenkai@come-future.com
 * @LastEditTime: 2025-04-21 16:06:29
 * @FilePath: /free-learning-front/src/components/ChatMessage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE   
-->
<template>
  <div class="chat-message-container">
    <el-tooltip
      :content="'你有' + unreadMessageCount + '条未读消息'"
      placement="bottom"
    >
      <el-badge
        v-if="unreadMessageCount > 0"
        :value="Number(unreadMessageCount)"
        :offset="[3, 0]"
        :max="99"
      >
        <el-icon style="width: 13px; height: 13px" @click="handleClick">
          <Message />
        </el-icon>
      </el-badge>
      <el-badge v-else @click="handleClick">
        <el-icon style="width: 13px; height: 13px">
          <Message />
        </el-icon>
      </el-badge>
    </el-tooltip>
  </div>
</template>

<script setup lang="ts">
import { queryNoReadMessageCount } from "@/api/chat-message";
import router from "@/router";
import { Message } from "@element-plus/icons-vue";
import { ElNotification } from "element-plus";
import { h, onMounted, ref } from "vue";
import WebSocketManager from "@/utils/websocket";
const unreadMessageCount = ref(0);
onMounted(() => {
  queryNoReadMessageCount().then((res) => {
    unreadMessageCount.value = Number(res);
    if (res > 0) {
      ElNotification({
        dangerouslyUseHTMLString: true,
        title: "提示",
        type: "warning",
        offset:50,
        message: h("div", null, [
          h("div", null, [
            h("span", null, "你有"),
            h("span", { style: "color: teal" }, res),
            h("span", null, "条私信未读"),
          ]),
          h(
            "div",
            {
              type: "primary",
              style: "margin-left: 10px;cursor: pointer;color: #437ffc",
              onClick: () => {
                router.push("/chat-message");
              },
            },
            "去查看"
          ),
        ]),
      });
    }
  });
  WebSocketManager.subscribeToTopic(
    "/user/queue/chat/message/count",
    (message) => {
      try {
        unreadMessageCount.value = Number(message);
      } catch (error) {
        console.error("处理WebSocket消息失败:", error);
      }
    }
  );
});
const handleClick = () => {
  router.push("/chat-message");
};
</script>

<style scoped>
.chat-message-container {
  cursor: pointer;
  width: 20px;
  height: 20px;
  margin-left: 25px;
}
</style>
